<script setup lang="ts">
import { useDataTable } from '@/hooks/common/data-table';
import { request } from '@/service/request';
import { renderDivColumn } from '@/utils/common';
import { watch } from 'vue';

defineOptions({
    name: 'QueryTable'
});

function fetchPostCommodityPage(data: any) {
    return request<any>({
        url: '/drug/commodity/page',
        method: 'post',
        data
    });
}

/** 费用上报 - 收入支出统计 */
function fetchPostAccountCostIncomeExpenseStatistics(data: any) {
    return request<any>({
        url: '/finance/account-cost/income-expense/statistics',
        method: 'post',
        data
    });
}

const {
    apiParams,
    tableKey,
    columns,
    columnChecks,
    summaryColumns,
    data,
    loading,
    pagination,
    getDataByPage,
    getActiveRow,
    getActiveRowHandler,
    inputHandler,
    toActive,
    toResetActive,
    inputRef,
    dataTableRef
} = useDataTable({
    tableKey: 'demoTable',
    apiFn: fetchPostCommodityPage,
    summaryFn: fetchPostAccountCostIncomeExpenseStatistics,
    columns: () => [
        {
            key: 'drugName',
            title: '测试',
            align: 'center',
            resizable: true,
            width: 200,
            minWidth: 200,
            maxWidth: 300
        }
    ],
    summaryColumns: (data: any) => {
        return {
            drugName: {
                value: renderDivColumn('test')
            }
        };
    }
});

watch(getActiveRow, (newVal) => {
    console.log('newVal: ', newVal);
});
</script>

<template>
    <NCard>
        <!-- dataTable -->
        <IDataTable
            ref="dataTableRef"
            row-class-name="row"
            :table-key="tableKey"
            :relations="inputRef ? [inputRef] : undefined"
            :columns="columns"
            :data="data"
            :loading="loading"
            :pagination="pagination"
            :summary="summaryColumns"
            @get-active-row="getActiveRowHandler"
        ></IDataTable>
    </NCard>
</template>
